<template>
  <el-container>
    <!-- <el-header class='elheader'>
			header
		</el-header> -->
    <el-main class="elmain">
      <el-card class="box_card">
        <div slot="header">
          <span class="sys_caption">诱导信息发布系统</span>
        </div>

        <div style="margin: 30px 50px">
          <el-input
            autocomplete="off"
            placeholder="用 户 名"
            :maxlength="20"
            :minlength="2"
            v-model="user_info.userName"
          >
            <template slot="prepend">
              <i class="el-icon-user-solid"></i>
            </template>
          </el-input>
        </div>
        <!-- type password 在 点击获得焦点后设置，否则上来chrome的记住密码 就会改变input 的样式 
          :type=" isPassword? 'password':'text' "
          -->
        <div style="margin: 30px 50px">
          <el-input
            @focus="changePass"
            autocomplete="off"
            :type="'password'"
            placeholder="密 码"
            :show-password="isPassword"
            v-model="user_info.password"
          >
            <template slot="prepend">
              <i class="el-icon-key"></i>
            </template>
          </el-input>
        </div>

        <div class="div_login" style="margin: 30px 50px">
          <el-button class="heartbeat" round @click="login">登 录</el-button>
        </div>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      isPassword: false,
      user_info: {
        userName: "",
        password: "",
      },
    };
  },
  mounted() {
    //console.log('http.defaults.baseURL',this.$http.defaults.baseURL)
  },
  methods: {
    changePass() {
      this.isPassword = true;
    },
    reset() {
      this.user_info.userName = "";
      this.user_info.password = "";
    },

    async login() {
      //提交数据 ,返回结果携带token
      //服务器应该定时 使token无效，
      //前端发现发现操作失败，如果是token 应该后台有提示 重新登录， 前端再重新登录，

      // this.$message.success(`${this.user_info.userName}登陆成功`);
      // let token = '123sdfs32wfsfsfsdf'
      // window.sessionStorage.setItem('ydpt_token',token)
      // this.$router.push({ path: "/screen" });

      if (!this.user_info.userName || !this.user_info.password) return;

      try {
        let ret = await this.$http.post("login", this.user_info);
        let { result, token } = ret.data;
        console.log(result, token);
        if (result == "ok") {
          // this.$message.success("登录成功");
          sessionStorage.setItem("Authorization", token);
          sessionStorage.setItem("currentUser", this.user_info.userName);

          if (this.$route.query.redirect) {
            let redirect = this.$route.query.redirect;
            this.$router.push(redirect);
          } else {
            this.$router.push({
              name: "Screen",
              // params: { userName: this.user_info.userName },
            });
          }
        } else {
          this.$message.error("用户名或密码错误,登录失败");
        }
      } catch (error) {
        // console.log();
      }
    },
  },
};
</script>

<style scoped>
.el-main {
  /* //position: relative; */
  /* width: 100%; */
  /* height: 100%; */
  /* background-color: #092f60; */
  /* background-color: rgba(9,47,96,.6); */

  background: #159957; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #155799,
    #159957
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #155799,
    #159957
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.sys_caption {
  font-size: 40px;
  font-weight: 500;
  color: rgb(255, 255, 255);
  background-color: rgba(0,0,0,0.04);
  border-radius: 10px;
  padding: 10px 20px;
}
.box_card {
  border: none;
  box-shadow: 10px 10px 25px rgb(77, 72, 72);

  /* background: rgba(0, 0, 0, 0.1); */
  background-color: transparent;
  /* margin: auto auto; */
  width: 580px;
  height: 360px;
  border-radius:20px;
  /* padding: 0; */
}

/* style scope 里, 想要使 编译后的 类名属性样式生效, 需 >>> 穿透 */
.box_card >>> .el-card__header {
  /* background-color: rgba(0, 0, 0, 0.09); */
  background-color: rgba(255, 2555, 255, 0.1);
  border-radius: 5px;
  /* border-bottom: 2px solid red; */
  border: none;
}

.box_card >>> .el-card__body {
  border-top: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
}

.el-input >>> input {
  font-size: 22px;
  outline: none;
  border: none;
  text-align: center;
  /* background-color:transparent !important; */
  /* background-color: rgba(0, 0, 0, 0.1) !important; */
  background: none;
  color: white;
}

/* 可以 解决 chrome 填充密码 样式问题 */
/* .el-input >>> input:-internal-autofill-previewed,
.el-input >>> input:-internal-autofill-selected  */

/* 可以解决 */
.el-input >>> input:-webkit-autofill {
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
  transition: background-color 5000s ease-in-out 0s !important;

  /* border: 1px solid red; */
}
.el-input >>> input:-webkit-autofill::first-line {
  font-size: 22px;
}

.el-input >>> div {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  /* margin-right: 10px; */
  border-radius: 5px;
  background-color: transparent;
}
.el-input >>> div i {
  font-size: 22px;
  outline: none;
  border: none;
}

.div_login button {
  font-size: 16px;
  color: white;
  /* font-weight: 900; */
  /* margin: auto 20px; */
  width: 100%;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.div_login button:hover {
  color: black;
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.2);
  /* margin: auto 20px; */
}

.heartbeat {
  -webkit-animation: heartbeat 1.5s ease-in-out 3 both;
  animation: heartbeat 1.5s ease-in-out 3 both;
}
/* ----------------------------------------------
 * Generated by Animista on 2021-10-26 9:14:20
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation heartbeat
 * ----------------------------------------
 */
@-webkit-keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
    transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
    transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
    transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}
</style>
